<template>
<div class="login-container">
    <van-nav-bar class="app-nav-bar" title="登录" left-arrow @click-left="$router.back()" />

    <van-form @submit="onLogin" v-on:failed="onValidateFailed" ref="login-form" validate-first :show-error-message="false" :show-error="false">
        <van-field v-model="user.mobile" name="mobile" placeholder="请输入手机号" :rules="formRules.mobile">
        </van-field>
        <van-field v-model="user.code" name="code" center placeholder="请输入验证码" :rules="formRules.code">
            <template #button>
                <van-count-down :time="1000 * 5" format="ss 秒" v-if="showCountDown" @finish="showCountDown = false" />
                <van-button v-else size="small" type="default" round class="send-btn" :loading="isSendSmsLoading" @click.prevent="onSendSms">发送验证码</van-button>
            </template>
        </van-field>
        <div class="login-btn-wrapper">
            <!-- native-type="submit" -->
            <van-button block type="info" class="login-btn">
                提交
            </van-button>
        </div>
    </van-form>

</div>
</template>

<script>
import {
    login,
    // eslint-disable-next-line no-unused-vars
    sendSms
} from '@/api/user'

export default {
    name: 'LoginIndex',
    components: {},
    props: {},
    data() {
        return {
            user: {
                mobile: '18753686528', // 手机号 17090086870
                code: '246810' // 验证码
            },
            formRules: {
                mobile: [{
                        required: true,
                        message: '请输入手机号'
                    },
                    {
                        pattern: /^1[3|5|7|8|9]\d{9}$/,
                        message: '手机号格式错误'
                    }
                ],
                code: [{
                        required: true,
                        message: '请输入验证码'
                    },
                    {
                        pattern: /^\d{6}$/,
                        message: '验证码格式错误'
                    }
                ]
            },
            showCountDown: false,
            isSendSmsLoading: false

        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        // onSubmit() {

        // },
        async onLogin() {
            console.log('res')
            const res = await login(this.user)
            console.log(res)

            this.$toast.loading({
                message: '登录中...', // 提示文本
                forbidClick: true, // 禁止背景点击
                duration: 0 // 展示时长(ms)，值为 0 时，toast 不会消失
            })
            try {
                const {
                    data
                } = await login(this.user)

                console.info(data)

                // 4. 处理响应结果
                this.$toast.success('登录成功')

                // 将后端返回的用户登录状态（token等数据）放到 Vuex 容器中
                this.$store.commit('setUser', data)

                // 登录成功，跳转回原来页面
                // this.$router.back() // 先用这种方式，但是它不太好，有问题
                this.$router.push(this.$route.query.redirect || '/')
            } catch (err) {

            }
        },
        async onSendSms() {
            console.log('onSendSms')
            try {
                // 验证 手机号码
                // 验证通过 -> 请求发送验证码 -> 用户接收验证码后输入之 -> 请求登录
                // 请求发送验证码 -> 隐藏发送按钮, 显示倒计时
                // 倒计时结束 -> 隐藏倒计时, 显示发送按钮
                const valid = await this.$refs['login-form'].validate('mobile')
                console.log('ddd', valid)
                // this.$refs['login-form'].validate('mobile').then(data => {
                //     console.log('ddd', data)
                // })
                // 发送短信按钮 loading
                this.isSendSmsLoading = true
                //  请求发送验证码
                const res = await sendSms(this.user.mobile)
                console.log('res', res)
                // 隐藏发送按钮, 显示倒计时
                this.showCountDown = true
                // 倒计时结束 -> 隐藏倒计时, 显示发送按钮
                // 通过 CountDown 倒计时组件的 finish事件
            } catch (err) {
                console.log('catch:err', err)
                // 发送短信失败异常
                let message = ''
                if (err.response && err.response.status === 429) {
                    message = '你发送的太频繁了'
                } else if (err.name === 'mobile') {
                    // 验证失败异常
                    message = err.message
                } else {
                    message = '未知错误'
                }

                this.$toast({
                    message: message,
                    position: 'top'
                })
            }
            // 最后关闭 发送按钮 loading
            this.isSendSmsLoading = false
            // 发送失败，显示发送按钮，关闭倒计时?
            this.showCountDown = false
        },
        onValidateFailed(errorInfo) {
            // console.log('errorInfo', errorInfo)

            if (errorInfo.errors && errorInfo.errors.length &&
                errorInfo.errors.length > 0) {
                this.$toast({
                    message: errorInfo.errors[0].message,
                    position: 'top'
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.login-container {
    .send-btn {
        background-color: #ededed;

        .van-button__text {
            color: #666;
        }
    }

    .login-btn-wrapper {
        margin: 26px 16px;
    }

    .van-button--info {
        color: #fff;
        background-color: #6db4fb;
        border: 0.02667rem solid #6db4fb;

        .van-button__text {
            font-size: 35px;
        }
    }

    .login-btn {
        .van-button__text {
            font-size: 16px;
        }
    }
}
</style>
